<template>
  <div class="content">
    <div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap">
      
      <div class="show"  ref="img" @mousedown="moveImg">
        <img src="~assets/img/map/ico.png" alt="" class="img1" @click="openImg">
        <img
          :src="fullscreenImgSrc"
          alt="大图"
          class="modal-img"
        />
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreenImgSrc: require("assets/img/sy/map.jpg"),
      scaleValue: 0.5,
    };
  },
 
  mounted() {},

  methods: {
    moveImg(e) {
      e.preventDefault();
      // 获取元素
      let imgWrap = this.$refs.imgWrap;
      let img = this.$refs.img;
      let x = e.pageX - img.offsetLeft;
      let y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      imgWrap.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", () => {
        imgWrap.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      imgWrap.addEventListener("mouseout", () => {
        imgWrap.removeEventListener("mousemove", move);
      });
    },
    rollImg() {
      this.scaleValue += event.wheelDelta / 1200;
      if (this.scaleValue >= 0.5 && this.scaleValue <= 3) {
        this.$refs.img.style.transform = "scale(" + this.scaleValue + ")";
      } else if (this.scaleValue < 0.5) {
        this.scaleValue = 0.5;
      } else if (this.scaleValue > 3) {
        this.scaleValue = 3;
      }
      return false;
    },
    openImg() {
      this.$emit("openImg",require('assets/img/sy/ny-info.png'));
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  .show {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    transform: scale(0.5);
  }
}
.modal-img {
  width: 100%;
  cursor: move;
  position: absolute;
  left: 0;
  
  &-wrap {
    text-align: center;
    width: 1600px;
    height: 960px;
    margin: 0 auto;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
  }
}
.img1 {
  width: 20px;
  height: 29px;
  position: absolute;
  top: 300px;
  left: 200px;
  z-index: 123;
}
</style>